Perf Hook

字数

236 字

阅读时间

2 分钟

useMemo vs useCallback

useMemo

• 用于缓存计算结果^[1]
• 缓存：计算结果（值）
• 场景：避免昂贵的重复计算（如复杂数据处理）
• 示例：

  useMemo(() => compute(a, b), [a, b])

useCallback

• 用于缓存函数^[2]
• 缓存：函数定义本身
• 场景：避免子组件不必要的重渲染（当函数作为 prop 传递时）
• 示例：

  useCallback((x) => doSomething(x), [dep])

并发渲染优化

useTransition

• 用于标记非紧急更新，允许其他紧急更新优先进行

useDeferredValue

• 用于延迟更新某个值，类似于防抖效果

适用场景

• 大量数据的列表渲染
• 复杂的搜索/过滤操作
• 需要保持 UI 响应性的重量级计算

贡献者

Ryan.G

页面历史

最后编辑于 大约 1 个月前

查看完整历史

6ed0c2f-chore(docs): Refiled React Hooks documentation files

9acdce3-chore(content)

---

1. React 官方文档 - useMemo ↩︎

2. React 官方文档 - useCallback ↩︎